<template>
  <div class="home">
    <p>页面列表导航</p>
    <div v-if="showNav">
      <div v-for="(item, index) in menuList" :key="item.name + index" >
        <div class="title_name" v-if="item.meta.type !== menuList[(index === 0 ? 1 : index)-1].meta.type">{{item.meta.type}}</div>
        <van-cell :value="item.name" is-link @click="$router.push(item.path)" :label="item.meta.legend">
          <template slot="title">
            <span class="custom-title">{{item.meta.title}}</span>
          </template>
        </van-cell>
      </div>
    </div>
    <form v-else class="prompt_text"  @keyup.enter.native="showNavList">
      <p>你来到了一个神奇的地方</p>
      <van-cell-group>
        <van-field
            v-model="showValue"
            center
            clearable
            placeholder="请输入暗号"
        >
          <van-button slot="button" size="small" type="primary" @click="showNavList">召唤</van-button>
        </van-field>
      </van-cell-group>
    </form>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      menuList: window.SITE_CONFIG['menuList'],
      indexList: [],
      showValue: '',
      showNav: false
    }
  },
  methods: {
    showNavList () {
      console.log(this.showNav)
      if (this.showValue === '1230.') {
        this.showNav = true
        console.log(this.showNav)
      }
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
  .home{
    max-width: 750px;
    margin: 0 auto;
    .title_name{
      margin: 0;
      font-weight: 400;
      font-size: 20px;
      color: rgba(69,90,100,.6);
      padding: 35px 15px 15px;
      background-color: #F8F8F8;
    }
    p{
      font-size: 32px;
      text-align: center;
    }
    .prompt_text{
      padding: 150px 30px;
      font-size: 32px;
      color: #d9d9d9;
      text-align: center;
      input{
        border: 1px solid #efefef;
        line-height: 50px;
        margin-top: 50px;
        padding: 10px;
        font-size: 24px;
      }
    }
    .remark_item{
      .item_p{
        font-size: 24px;
        color: #999999;
      }
    }
  }
</style>
